
<template>
  <div class="main-box" >
    <div class="canvas-container" ref="container"></div>
    <el-input v-model="number" style="width:223px;position: absolute;right:25px;top:150px;z-index: 5" placeholder="设备剩余数量"></el-input>
    <el-select v-model="selectedDevice" filterable @change="handleChange"
               style="position: absolute; right: 25px; top: 100px; z-index: 5" placeholder="选择类型">
      <el-option
          v-for="device in deviceOptions"
          :key="device.value"
          :label="device.label"
          :value="device.value">
        {{ device.label }}
      </el-option>
    </el-select>
    <el-button @click="ReturnTheDevice" style="position: absolute;right:165px;top:200px;z-index: 5" placeholder="设备剩余数量">还设备</el-button>
    <el-button @click="TackTheDevice" style="position: absolute;right:25px;top:200px;z-index: 5" placeholder="设备剩余数量">取设备</el-button>
  </div>
</template>
<script>
import Konva from "konva";

export default {
  name: "Case2Demo",
  data(){
    return{
      stage:null,
      layer:null,
      selectedDevice:null,//选择设备
      number:0,//剩余数量
      deviceInventory: {
        safetyBelt: { total: 2, remaining: 2, devices: [{id:1,taken:false},{id:2,taken:false}] },
        safetyRope: { total: 2, remaining: 2, devices: [{id:3,taken:false},{id:4,taken:false}] },
        walkieTalkie: { total: 4, remaining: 4, devices: [{id:5,taken:false},{id:6,taken:false},{id:7,taken:false},{id:8,taken:false}] },
        gasMask: { total: 4, remaining: 4, devices: [{id:9,taken:false},{id:10,taken:false},{id:11,taken:false},{id:12,taken:false}] },
        fireFlashlight: { total: 4, remaining: 4, devices: [{id:13,taken:false},{id:14,taken:false},{id:15,taken:false},{id:16,taken:false}] },
        fireHelmet: { total: 4, remaining: 4, devices: [{id:17,taken:false},{id:18,taken:false},{id:19,taken:false},{id:20,taken:false}] },
        fireSuit: { total: 4, remaining: 4, devices: [{id:21,taken:false},{id:22,taken:false},{id:23,taken:false},{id:24,taken:false}] },
        cautionTape: { total: 3, remaining: 3, devices: [{id:25,taken:false},{id:26,taken:false},{id:27,taken:false}] },
        fireGloves: { total: 4, remaining: 4, devices: [{id:28,taken:false},{id:29,taken:false},{id:30,taken:false},{id:31,taken:false}] },
        reflectiveVest: { total: 4, remaining: 4, devices: [{id:32,taken:false},{id:33,taken:false},{id:34,taken:false},{id:35,taken:false}] },
        fireBoots: { total: 4, remaining: 4, devices: [{id:36,taken:false},{id:37,taken:false},{id:38,taken:false},{id:39,taken:false}] },
        megaphone: { total: 2, remaining: 2, devices: [{id:40,taken:false},{id:41,taken:false}] }
      }

    }
  },
  computed: {
    deviceOptions() {
      const options = [];
      Object.keys(this.deviceInventory).forEach(type => {
        this.deviceInventory[type].devices.forEach((device, index) => {
          options.push({
            label: `${this.getDeviceLabel(type)}${index + 1}`, // 生成如 "安全带1" 的 label
            value: device.id // 对应设备 ID，确保唯一性
          });
        });
      });
      return options;
    }
  },

  mounted() {
    this.$nextTick(()=>{
      this.init();
    })
  },
  methods:{
    getDeviceLabel(type) {
      // 根据类型返回对应的中文名称
      const labels = {
        safetyBelt: "安全带",
        safetyRope: "安全绳",
        walkieTalkie: "对讲器",
        gasMask: "防毒面具",
        fireFlashlight: "消防手电",
        fireHelmet: "消防头盔",
        fireSuit: "消防服",
        cautionTape: "警戒线",
        fireGloves: "消防手套",
        reflectiveVest: "反光背心",
        fireBoots: "消防靴子",
        megaphone: "喊话器"
      };
      return labels[type] || type; // 返回设备类型对应的中文名称
    },
    // 选中设备
    handleChange(val) {
      this.selectedDevice = Number(val);

      // 查找设备类型
      const deviceType = Object.keys(this.deviceInventory).find(key =>
          this.deviceInventory[key].devices.some(device => device.id === this.selectedDevice)
      );

      if (deviceType) {
        // 根据 taken 状态计算剩余数量
        const device = this.deviceInventory[deviceType];
        const remainingCount = device.devices.filter(d => !d.taken).length;
        this.number = remainingCount;  // 更新设备剩余数量
        console.log(this.selectedDevice, '选中设备');
      }
    },

    TackTheDevice() {
      const deviceType = Object.keys(this.deviceInventory).find(
          key => this.deviceInventory[key].devices.some(device => device.id === this.selectedDevice)
      );

      if (!deviceType) {
        this.$message.warning("未找到设备类型！");
        return;
      }

      const device = this.deviceInventory[deviceType].devices.find(
          d => d.id === this.selectedDevice
      );

      if (device && !device.taken) {
        this.removeImageForDevice(this.selectedDevice);  // 移除设备图像
        device.taken = true;  // 标记设备已被取走
        this.deviceInventory[deviceType].remaining--;  // 更新剩余数量
        this.number = this.deviceInventory[deviceType].remaining;  // 更新显示
        this.$message.success("设备已成功取出！");
      } else if (device && device.taken) {
        this.$message.warning("设备已被取出！");
      } else {
        this.$message.warning("设备数量不足！");
      }
    },


    ReturnTheDevice() {
      const deviceType = Object.keys(this.deviceInventory).find(
          key => this.deviceInventory[key].devices.some(device => device.id === this.selectedDevice)
      );

      if (!deviceType) {
        this.$message.warning("未找到设备类型！");
        return;
      }

      const device = this.deviceInventory[deviceType].devices.find(
          d => d.id === this.selectedDevice
      );

      if (device && device.taken) {
        this.addImageForDevice(this.selectedDevice);  // 添加设备图像
        device.taken = false;  // 标记设备已归还
        this.deviceInventory[deviceType].remaining++;  // 更新剩余数量
        this.number = this.deviceInventory[deviceType].remaining;  // 更新显示
        this.$message.success("设备已成功归还！");
      } else if (device && !device.taken) {
        this.$message.warning("设备尚未取出！");
      } else {
        this.$message.warning("设备已满！");
      }
    },





    addImageForDevice() {
      if (this.selectedDevice == 1) {
        this.addImageToLayer("安全带尾绳.svg", 380, 80, 60, 50);
        // this.removeImage('空白 (1).svg', 380, 80,)
      } else if (this.selectedDevice == 2) {
        this.addImageToLayer("安全带尾绳.svg", 450, 80, 60, 50);
        // this.removeImage('空白 (1).svg', 450, 80,)
      } else if (this.selectedDevice == 3) {
        this.addImageToLayer("安全绳.svg", 520, 80, 60, 50);
        // this.removeImage('空白 (1).svg',520, 80,)
      } else if (this.selectedDevice == 4) {
        this.addImageToLayer("安全绳.svg", 580, 80, 60, 50);
        // this.removeImage('空白 (1).svg', 580, 80,)
      }else if (this.selectedDevice == 5) {
        this.addImageToLayer('对讲机 (1).svg', 360, 165,50,45);
        // this.removeImage('空白 (1).svg', 360, 165,)
      } else if (this.selectedDevice == 6) {
        this.addImageToLayer('对讲机 (1).svg', 390, 165,50,45);
        // this.removeImage('空白 (1).svg', 390, 165,)
      }else if (this.selectedDevice == 7) {
        this.addImageToLayer('对讲机 (1).svg', 360, 210,50,45);
        // this.removeImage('空白 (1).svg', 360, 210,)
      }else if (this.selectedDevice == 8) {
        this.addImageToLayer('对讲机 (1).svg', 390, 210,50,45);
        // this.removeImage('空白 (1).svg', 390, 210,)
      }else if (this.selectedDevice == 9) {
        this.addImageToLayer('防毒面具 (1).svg', 450, 190,50,50);
        // this.removeImage('空白 (1).svg', 450, 190,)
      } else if (this.selectedDevice == 10) {
        this.addImageToLayer('防毒面具 (1).svg', 495, 190,50,50);
        // this.removeImage('空白 (1).svg', 495, 190,)
      }else if (this.selectedDevice == 11) {
        this.addImageToLayer('防毒面具 (1).svg', 540, 190,50,50);
        // this.removeImage('空白 (1).svg', 540, 190,)
      }else if (this.selectedDevice == 12) {
        this.addImageToLayer('防毒面具 (1).svg', 585, 190,50,50);
        // this.removeImage('空白 (1).svg', 585, 190,)
      }else if (this.selectedDevice == 13) {
        this.addImageToLayer('手电筒.svg', 650, 175,40,40);
        // this.removeImage('空白 (1).svg', 650, 175,)
      } else if (this.selectedDevice == 14) {
        this.addImageToLayer('手电筒.svg', 690, 175,40,40);
        // this.removeImage('空白 (1).svg', 690, 175,)
      }else if (this.selectedDevice == 15) {
        this.addImageToLayer('手电筒.svg', 650, 210,40,40);
        // this.removeImage('空白 (1).svg', 650, 210,)
      }else if (this.selectedDevice == 16) {
        this.addImageToLayer('手电筒.svg', 690, 210,40,40);
        // this.removeImage('空白 (1).svg', 690, 210,)
      }else if (this.selectedDevice == 17) {
        this.addImageToLayer('消防装备产品.svg', 380, 290,80,80);
        // this.removeImage('空白 (1).svg', 380, 290,)
      } else if (this.selectedDevice == 18) {
        this.addImageToLayer('消防装备产品.svg', 460, 290,80,80);
        // this.removeImage('空白 (1).svg', 460, 290,)
      }else if (this.selectedDevice == 19) {
        this.addImageToLayer('消防装备产品.svg', 540, 290,80,80);
        // this.removeImage('空白 (1).svg', 540, 290,)
      }else if (this.selectedDevice == 20) {
        this.addImageToLayer('消防装备产品.svg', 620, 290,80,80);
        // this.removeImage('空白 (1).svg', 620, 290,)
      }else if (this.selectedDevice == 21) {
        this.addImageToLayer('2 - Life Jacket (Flat).svg', 760, 80,160,140);
        // this.removeImage('空白 (1).svg', 760, 80,)
      } else if (this.selectedDevice == 22) {
        this.addImageToLayer('2 - Life Jacket (Flat).svg', 920, 80,160,140);
        // this.removeImage('空白 (1).svg', 920, 80,)
      }else if (this.selectedDevice == 23) {
        this.addImageToLayer('2 - Life Jacket (Flat).svg', 760, 230,160,140);
        // this.removeImage('空白 (1).svg', 760, 230,)
      }else if (this.selectedDevice == 24) {
        this.addImageToLayer('2 - Life Jacket (Flat).svg', 920, 230,160,140);
        // this.removeImage('空白 (1).svg', 920, 230,)
      }else if (this.selectedDevice == 25) {
        this.addImageToLayer('警戒线.svg', 380, 420,160,40);
        // this.removeImage('空白 (1).svg', 380, 420,)
      }else if (this.selectedDevice == 26) {
        this.addImageToLayer('警戒线.svg', 380, 490,160,40);
        // this.removeImage('空白 (1).svg', 380, 490,)
      }else if (this.selectedDevice == 27) {
        this.addImageToLayer('警戒线.svg', 380, 560,160,40);
        // this.removeImage('空白 (1).svg', 380, 560,)
      }else if (this.selectedDevice == 28) {
        this.addImageToLayer('消防手套.svg', 550, 400,90,60);
        // this.removeImage('空白 (1).svg', 550, 400,)
      }else if (this.selectedDevice == 29) {
        this.addImageToLayer('消防手套.svg', 620, 400,90,60);
        // this.removeImage('空白 (1).svg', 620, 400,)
      }else if (this.selectedDevice == 30) {
        this.addImageToLayer('消防手套.svg', 690, 400,90,60);
        // this.removeImage('空白 (1).svg', 690, 400,)
      }else if (this.selectedDevice == 31) {
        this.addImageToLayer('消防手套.svg', 760, 400,90,60);
        // this.removeImage('空白 (1).svg', 760, 400,)
      }else if (this.selectedDevice == 32) {
        this.addImageToLayer('反光背心.svg', 550, 480,90,60);
        // this.removeImage('空白 (1).svg', 550, 480,)
      }else if (this.selectedDevice == 33) {
        this.addImageToLayer('反光背心.svg', 620, 480,90,60);
        // this.removeImage('空白 (1).svg', 620, 480,)
      }else if (this.selectedDevice == 34) {
        this.addImageToLayer('反光背心.svg', 690, 480,90,60);
        // this.removeImage('空白 (1).svg', 690, 480,)
      }else if (this.selectedDevice == 35) {
        this.addImageToLayer('反光背心.svg', 760, 480,90,60);
        // this.removeImage('空白 (1).svg', 760, 480,)
      }else if (this.selectedDevice == 36) {
        this.addImageToLayer('雨靴.svg', 880, 410,120,100);
        // this.removeImage('空白 (1).svg', 880, 410,)
      }else if (this.selectedDevice == 37) {
        this.addImageToLayer('雨靴.svg', 990, 410,120,100);
        // this.removeImage('空白 (1).svg', 990, 410,)
      }else if (this.selectedDevice == 38) {
        this.addImageToLayer('雨靴.svg', 880, 550,120,100);
        // this.removeImage('空白 (1).svg', 880, 550,)
      }else if (this.selectedDevice == 39) {
        this.addImageToLayer('雨靴.svg', 990, 550,120,100);
        // this.removeImage('空白 (1).svg', 990, 550,)
      }else if (this.selectedDevice == 40) {
        this.addImageToLayer('喊话器.svg', 580, 550,90,90);
        // this.removeImage('空白 (1).svg', 580, 550,)
      }else if (this.selectedDevice == 41) {
        this.addImageToLayer('喊话器.svg', 690, 550,90,90);
        // this.removeImage('空白 (1).svg', 690, 550,)
      }
      // 添加其他设备的处理逻辑
    },


    removeImageForDevice() {
      if (this.selectedDevice == 1) {
        this.removeImage("安全带尾绳.svg", 380, 80, 60, 50);
        // this.addImageToLayer('空白 (1).svg',380, 80, 60, 50)
      } else if (this.selectedDevice == 2) {
        this.removeImage("安全带尾绳.svg", 450, 80, 60, 50);
        // this.addImageToLayer('空白 (1).svg',450, 80, 60, 50)
      } else if (this.selectedDevice == 3) {
        this.removeImage("安全绳.svg", 520, 80, 60, 50);
        // this.addImageToLayer('空白 (1).svg',520, 80, 60, 50)
      } else if (this.selectedDevice == 4) {
        this.removeImage("安全绳.svg", 580, 80, 60, 50);
        // this.addImageToLayer('空白 (1).svg',580, 80, 60, 50)
      } else if (this.selectedDevice == 5) {
        this.removeImage('对讲机 (1).svg', 360, 165,50,45);
        // this.addImageToLayer('空白 (1).svg',368, 168,35,35)
      } else if (this.selectedDevice == 6) {
        this.removeImage('对讲机 (1).svg', 390, 165,50,45);
        // this.addImageToLayer('空白 (1).svg',390, 165,50,45)
      }else if (this.selectedDevice == 7) {
        this.removeImage('对讲机 (1).svg', 360, 210,50,45);
        // this.addImageToLayer('空白 (1).svg',360, 210,50,45)
      }else if (this.selectedDevice == 8) {
        this.removeImage('对讲机 (1).svg', 390, 210,50,45);
        // this.addImageToLayer('空白 (1).svg',390, 210,50,45)
      }else if (this.selectedDevice == 9) {
        this.removeImage('防毒面具 (1).svg', 450, 190,50,50);
        // this.addImageToLayer('空白 (1).svg', 450, 190,50,50)
      } else if (this.selectedDevice == 10) {
        this.removeImage('防毒面具 (1).svg', 495, 190,50,50);
        // this.addImageToLayer('空白 (1).svg', 495, 190,50,50)
      }else if (this.selectedDevice == 11) {
        this.removeImage('防毒面具 (1).svg', 540, 190,50,50);
        // this.addImageToLayer('空白 (1).svg', 540, 190,50,50)
      }else if (this.selectedDevice == 12) {
        this.removeImage('防毒面具 (1).svg', 585, 190,50,50);
        // this.addImageToLayer('空白 (1).svg', 585, 190,50,50)
      }else if (this.selectedDevice == 13) {
        this.removeImage('手电筒.svg', 650, 175,40,40);
        // this.addImageToLayer('空白 (1).svg', 650, 175,40,40)
      } else if (this.selectedDevice == 14) {
        this.removeImage('手电筒.svg', 690, 175,40,40);
        // this.addImageToLayer('空白 (1).svg', 690, 175,40,40)
      }else if (this.selectedDevice == 15) {
        this.removeImage('手电筒.svg', 650, 210,40,40);
        // this.addImageToLayer('空白 (1).svg', 650, 210,40,40)
      }else if (this.selectedDevice == 16) {
        this.removeImage('手电筒.svg', 690, 210,40,40);
        // this.addImageToLayer('空白 (1).svg', 690, 210,40,40)
      }else if (this.selectedDevice == 17) {
        this.removeImage('消防装备产品.svg', 380, 290,80,80);
        // this.addImageToLayer('空白 (1).svg', 380, 290,80,80)
      } else if (this.selectedDevice == 18) {
        this.removeImage('消防装备产品.svg', 460, 290,80,80);
        // this.addImageToLayer('空白 (1).svg', 460, 290,80,80)
      }else if (this.selectedDevice == 19) {
        this.removeImage('消防装备产品.svg', 540, 290,80,80);
        // this.addImageToLayer('空白 (1).svg', 540, 290,80,80)
      }else if (this.selectedDevice == 20) {
        this.removeImage('消防装备产品.svg', 620, 290,80,80);
        // this.addImageToLayer('空白 (1).svg', 620, 290,80,80)
      }else if (this.selectedDevice == 21) {
        this.removeImage('2 - Life Jacket (Flat).svg', 760, 80,160,140);
        // this.addImageToLayer('空白 (1).svg', 760, 80,160,140)
      } else if (this.selectedDevice == 22) {
        this.removeImage('2 - Life Jacket (Flat).svg', 920, 80,160,140);
        // this.addImageToLayer('空白 (1).svg', 920, 80,160,140)
      }else if (this.selectedDevice == 23) {
        this.removeImage('2 - Life Jacket (Flat).svg', 760, 230,160,140);
        // this.addImageToLayer('空白 (1).svg', 760, 230,160,140)
      }else if (this.selectedDevice == 24) {
        this.removeImage('2 - Life Jacket (Flat).svg', 920, 230,160,140);
        // this.addImageToLayer('空白 (1).svg', 920, 230,160,140)
      }else if (this.selectedDevice == 25) {
        this.removeImage('警戒线.svg', 380, 420,160,40);
        // this.addImageToLayer('空白 (1).svg', 380, 420,160,40)
      }else if (this.selectedDevice == 26) {
        this.removeImage('警戒线.svg', 380, 490,160,40);
        // this.addImageToLayer('空白 (1).svg', 380, 490,160,40)
      }else if (this.selectedDevice == 27) {
        this.removeImage('警戒线.svg', 380, 560,160,40);
        // this.addImageToLayer('空白 (1).svg', 380, 560,160,40)
      }else if (this.selectedDevice == 28) {
        this.removeImage('消防手套.svg', 550, 400,90,60);
        // this.addImageToLayer('空白 (1).svg', 550, 400,90,60)
      }else if (this.selectedDevice == 29) {
        this.removeImage('消防手套.svg', 620, 400,90,60);
        // this.addImageToLayer('空白 (1).svg', 620, 400,90,60)
      }else if (this.selectedDevice == 30) {
        this.removeImage('消防手套.svg', 690, 400,90,60);
        // this.addImageToLayer('空白 (1).svg', 690, 400,90,60)
      }else if (this.selectedDevice == 31) {
        this.removeImage('消防手套.svg', 760, 400,90,60);
        // this.addImageToLayer('空白 (1).svg', 760, 400,90,60)
      }else if (this.selectedDevice == 32) {
        this.removeImage('反光背心.svg', 550, 480,90,60);
        // this.addImageToLayer('空白 (1).svg', 550, 480,90,60)
      }else if (this.selectedDevice == 33) {
        this.removeImage('反光背心.svg', 620, 480,90,60);
        // this.addImageToLayer('空白 (1).svg', 620, 480,90,60)
      }else if (this.selectedDevice == 34) {
        this.removeImage('反光背心.svg', 690, 480,90,60);
        // this.addImageToLayer('空白 (1).svg', 690, 480,90,60)
      }else if (this.selectedDevice == 35) {
        this.removeImage('反光背心.svg', 760, 480,90,60);
        // this.addImageToLayer('空白 (1).svg', 760, 480,90,60)
      }else if (this.selectedDevice == 36) {
        this.removeImage('雨靴.svg', 880, 410,120,100);
        // this.addImageToLayer('空白 (1).svg', 880, 410,120,100)
      }else if (this.selectedDevice == 37) {
        this.removeImage('雨靴.svg', 990, 410,120,100);
        // this.addImageToLayer('空白 (1).svg', 990, 410,120,100)
      }else if (this.selectedDevice == 38) {
        this.removeImage('雨靴.svg', 880, 550,120,100);
        // this.addImageToLayer('空白 (1).svg', 880, 550,120,100)
      }else if (this.selectedDevice == 39) {
        this.removeImage('雨靴.svg', 990, 550,120,100);
        // this.addImageToLayer('空白 (1).svg', 990, 550,120,100)
      }else if (this.selectedDevice == 40) {
        this.removeImage('喊话器.svg', 580, 550,90,90);
        // this.addImageToLayer('空白 (1).svg', 580, 550,90,90)
      }else if (this.selectedDevice == 41) {
        this.removeImage('喊话器.svg', 690, 550,90,90);
        // this.addImageToLayer('空白 (1).svg', 690, 550,90,90)
      }
      // 添加其他设备的处理逻辑
    },
    // 移除指定位置的图像
    removeImage(src, x, y) {
      const children = this.layer.getChildren();
      for (let i = 0; i < children.length; i++) {
        const child = children[i];
        if (child instanceof Konva.Image && child.attrs.x === x && child.attrs.y === y) {
          child.destroy();
          this.layer.draw();
          break;
        }
      }
    },
    // 创建并添加图片到Konva层的函数
    addImageToLayer(src, x, y,w,h) {
        const img = new Image();
        img.src = require(`@/assets/svg/${src}`);
        img.onload = () => {
          const konvaImage = new Konva.Image({
            x: x,
            y: y,
            image: img,
            width: w,
            height: h,
            draggable: false
          });
          this.layer.add(konvaImage);
          this.layer.draw();
        };
    },
    init(){
      const container=this.$refs.container;
      this.stage=new Konva.Stage({
        container: container,
        width:1200,
        height:700,
      })
      this.layer = new Konva.Layer();

      var image=new Image()
      image.src=require('@/assets/box.png')
      image.onload = ()=>{
        var konvaImage=new Konva.Image({
          x: 350, // 图片的X坐标
          y: 50, // 图片的Y坐标
          image: image,
          width: 800, // 图片的宽度
          height: 650, // 图片的高度
          draggable: false
        })
        this.layer.add(konvaImage);
        this.layer.draw()
      }
      // 调用函数添加多个图片
      this.addImageToLayer('安全带尾绳.svg', 380, 80,60,50); // safe1
      this.addImageToLayer('安全带尾绳.svg', 450, 80,60,50); // safe2
      this.addImageToLayer('安全绳.svg', 520, 80,60,50);     // rope1
      this.addImageToLayer('安全绳.svg', 580, 80,60,50);     // rope2
      this.addImageToLayer('对讲机 (1).svg', 360, 165,50,45);     // 对讲机1
      this.addImageToLayer('对讲机 (1).svg', 390, 165,50,45);     // 对讲机2
      this.addImageToLayer('对讲机 (1).svg', 360, 210,50,45);     // 对讲机3
      this.addImageToLayer('对讲机 (1).svg', 390, 210,50,45);     // 对讲机4
      this.addImageToLayer('防毒面具 (1).svg', 450, 190,50,50);     // 防毒面具
      this.addImageToLayer('防毒面具 (1).svg', 495, 190,50,50);     // 防毒面具
      this.addImageToLayer('防毒面具 (1).svg', 540, 190,50,50);     // 防毒面具
      this.addImageToLayer('防毒面具 (1).svg', 585, 190,50,50);     // 防毒面具
      this.addImageToLayer('手电筒.svg', 650, 175,40,40);     // 手电筒
      this.addImageToLayer('手电筒.svg', 690, 175,40,40);     // 手电筒
      this.addImageToLayer('手电筒.svg', 650, 210,40,40);     // 手电筒
      this.addImageToLayer('手电筒.svg', 690, 210,40,40);     // 手电筒

      this.addImageToLayer('消防装备产品.svg', 380, 290,80,80);     // 消防装备产品
      this.addImageToLayer('消防装备产品.svg', 460, 290,80,80);     // 消防装备产品
      this.addImageToLayer('消防装备产品.svg', 540, 290,80,80);     // 消防装备产品
      this.addImageToLayer('消防装备产品.svg', 620, 290,80,80);     // 消防装备产品
      this.addImageToLayer('2 - Life Jacket (Flat).svg', 760, 80,160,140);     // 手电筒
      this.addImageToLayer('2 - Life Jacket (Flat).svg', 920, 80,160,140);     // 手电筒
      this.addImageToLayer('2 - Life Jacket (Flat).svg', 760, 230,160,140);     // 手电筒
      this.addImageToLayer('2 - Life Jacket (Flat).svg', 920, 230,160,140);     // 手电筒
      this.addImageToLayer('警戒线.svg', 380, 420,160,40);     // 警戒线
      this.addImageToLayer('警戒线.svg', 380, 490,160,40);     // 警戒线
      this.addImageToLayer('警戒线.svg', 380, 560,160,40);     // 警戒线
      this.addImageToLayer('消防手套.svg', 550, 400,90,60);     // 消防手套
      this.addImageToLayer('消防手套.svg', 620, 400,90,60);     // 消防手套
      this.addImageToLayer('消防手套.svg', 690, 400,90,60);     // 消防手套
      this.addImageToLayer('消防手套.svg', 760, 400,90,60);     // 消防手套
      this.addImageToLayer('反光背心.svg', 550, 480,90,60);     // 反光背心
      this.addImageToLayer('反光背心.svg', 620, 480,90,60);     // 反光背心
      this.addImageToLayer('反光背心.svg', 690, 480,90,60);     // 反光背心
      this.addImageToLayer('反光背心.svg', 760, 480,90,60);     // 反光背心
      this.addImageToLayer('喊话器.svg', 580, 550,90,90);     // 喊话器
      this.addImageToLayer('喊话器.svg', 690, 550,90,90);     // 喊话器

      this.addImageToLayer('雨靴.svg', 880, 410,120,100);     // 雨靴
      this.addImageToLayer('雨靴.svg', 990, 410,120,100);     // 雨靴
      this.addImageToLayer('雨靴.svg', 880, 550,120,100);     // 雨靴
      this.addImageToLayer('雨靴.svg', 990, 550,120,100);     // 雨靴

      this.stage.add(this.layer);
    }

  }
}
</script>
<style scoped src="./Case2Demo.css">

</style>